  <template>
  <!-- 这是我的个人简历板块 -->
  <div class="person">
    <div class="header"></div>
    <router-view></router-view>
    <div class="personal">
      <div class="top">
        <img src="../assets/头像.png" alt="" />
        <p>{{personalData.remark}}</p>
      </div>
      <div class="name">
        <p>
        姓名&nbsp;&nbsp;<span>{{personalData.nickName}}</span>
        </p>
        <p>
          联系方式&nbsp;&nbsp;<span>{{personalData.phone}}</span>
        </p>
      </div>
    </div>
    <div class="message">
      <ul>
        <li @click="gerenClick">
          <div class="left">
            <img src="../assets/Personal information.png" alt="" />
            <span>个人信息</span>
          </div>
          <van-icon name="arrow" />
        </li>
        <li>
          <div class="left">
            <img src="../assets/形状 2.png" alt="" />
            <span>支付中心</span>
          </div>
          <van-icon name="arrow" />
        </li>
        <li>
          <div class="left">
            <img src="../assets/change Password.png" alt="" />
            <span>修改密码</span>
          </div>
          <van-icon name="arrow" />
        </li>
        <li class="only" @click="versionsClick">
          <div class="left">
            <img src="../assets/版本信息.png" alt="" />
            <span>版本信息</span>
          </div>
          <div class="right">
            <span>版本1.0</span>
            <div class="icon">
              <van-icon name="arrow" />
            </div>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../assets/组 16.png" alt="" />
            <span>清除信息</span>
          </div>
          <van-icon name="arrow" />
        </li>
      </ul>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item :icon="active == 0 ? imgSrc2 : imgSrc1" @click="xitClick"
        >系统功能</van-tabbar-item
      >
      <van-tabbar-item icon="comment-o">联系</van-tabbar-item>
      <van-tabbar-item :icon="active == 2 ? imgSrc4 : imgSrc3"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
    <div class="btn">
      <button @click="quitClick">退出登录</button>
      <van-dialog v-model="show" title="是否退出登录" show-cancel-button @confirm="loginClick">
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { GetList } from "../raxios/api";
import { Dialog } from "vant";
export default {
  data() {
    return {
      active: 2,
      personalData: {},
      imgSrc1: require("../assets/矢量智能对象-2.png"),
      imgSrc2: require("../assets/系统功能.png"),
      imgSrc3: require("../assets/个人中心.png"),
      imgSrc4: require("../assets/矢量智能对象.png"),
      show: false,
    };
  },
  methods: {
    gerenClick() {
      this.$router.push("/personcentre/Info");
    },
    //点击系统功能
    xitClick() {
      this.$router.go(-1);
    },
    versionsClick() {
      this.$router.push("/personcentre/Versions");
    },
    quitClick() {
      this.show = true
    },
    loginClick(){
      this.$router.push("/register-index");
    }
  },

  created() {
    GetList().then((res) => {
      console.log(res.data);
      this.personalData = res.data;
    });
  },
};
</script>
 
<style lang="less" scoped>
  * {
  padding: 0;
  margin: 0;
}
.person{
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    width: 100%;
    height: 1.6rem;
    background-image: url("../assets/个人简介.png");
  }
  .personal {
    text-align: center;
    width: 94%;
    // height: 1.7rem;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.05rem;
    position: absolute;
    top: 1rem;
    left: 0.1rem;

    .top {
      border-bottom: 1px dashed #999;
      //   height: 1rem;
      img {
        width: 1.2rem;
        margin-bottom: 0.2rem;
        position: absolute;
        top: -0.5rem;
        left: 50%;
        margin-left: -0.6rem;
        border: 0.06rem solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 0.05rem 0.05rem #ccc;
        border-radius: 50%;
      }
      p {
        height: 0.6rem;
        line-height: 0.6rem;
        margin-top: 0.7rem;
      }
    }
    .name {
      display: flex;
      justify-content: space-between;
      padding: 0 0.1rem;
      height: 0.5rem;
      line-height: 0.5rem;
    }
  }
  .message {
    margin-top: 1.2rem;
    padding: 0.1rem;
    li {
      display: flex;
      justify-content: space-between;
      height: 0.5rem;
      line-height: 0.5rem;
      background-color: #fff;
      padding: 0 0.1rem;
      border-bottom: 1px solid #e7e7e7;
      .left {
        img {
          width: 0.15rem;
          margin-right: 0.1rem;
          // margin-top: 0.12rem;
          vertical-align: middle;
        }
        span {
          font-size: 0.16rem;
          // margin-bottom: 0.2rem;
        }
      }
      .van-icon {
        font-size: 0.18rem;
        margin-top: 0.16rem;
      }
      .right {
        display: flex;
        span {
          margin-right: 0.05rem;
          padding-bottom: 0.1rem;
        }
        .icon {
          .van-icon {
            font-size: 0.18rem;
            // margin-top: 0.16rem;
          }
        }
      }
    }
  }
  .van-tabbar {
    display: flex;
    justify-content: space-between;
  }
  .btn {
    margin-top: 0.1rem;
    button {
      width: 94%;
      height: 0.4rem;
      line-height: 0.4rem;
      background-color: #e9e9e9;
      color: #797979;
      margin-left: 3%;
      border: 0;
    }
    /deep/.van-dialog__confirm {
      color: #91b9ff;
    }
  }
}
</style>
  
